<template>
  <div class="row">
    <div class="col-3">
      <h3>Draggable 1</h3>
      <draggable
        class="dragArea list-group"
        :list="list1"
        :clone="clone"
        :group="{ name: 'people', pull: pullFunction }"
        @start="start"
      >
        <div class="list-group-item" v-for="element in list1" :key="element.id">
          {{ element.name }}
        </div>

        <button slot="header">Add</button>
      </draggable>
    </div>

    <div class="col-3">
      <h3>Draggable 2</h3>
      <draggable class="dragArea list-group" :list="list2" group="people">
        <div class="list-group-item" v-for="element in list2" :key="element.id">
          {{ element.name }}
        </div>
        <button slot="header">Add</button>
      </draggable>
    </div>

    <rawDisplayer class="col-3" :value="list1" title="List 1" />

    <rawDisplayer class="col-3" :value="list2" title="List 2" />
  </div>
</template>

<script lang="ts" setup>
import {ref, reactive} from 'vue'
import { VueDraggableNext as draggable } from 'vue-draggable-next'
import tlButton from '../components/tl-button.vue';

let idGlobal = 8

const list1 = reactive([
  { name: "Jesus", id: 1 },
  { name: "Paul", id: 2 },
  { name: "Peter", id: 3 }
])
const list2 = reactive([
  { name: "Luc", id: 5 },
  { name: "Thomas", id: 6 },
  { name: "John", id: 7 }
])
const controlOnStart = ref(true)

function clone({ name }) {
  return { name, id: idGlobal++ };
}
function pullFunction() {
  return controlOnStart.value ? "clone" : true;
}
function start({ originalEvent }) {
  controlOnStart.value = originalEvent.ctrlKey;
}
</script>

<style lang="scss" scoped>
</style>